<template>
  <div class="app-container">
    <el-form ref="skuAddForm" :model="skuAddFormData" :rules="skuRules" size="medium" label-width="100px">
      <el-form-item label="SKU名称" prop="skuName">
        <el-input v-model="skuAddFormData.skuName" placeholder="请输入SKU名称" clearable :style="{width: '100%'}" />
      </el-form-item>
      <el-form-item label="SKU类型" prop="skuType">
        <el-select v-model="skuAddFormData.skuType" placeholder="请选择SKU类型" clearable :style="{width: '100%'}">
          <el-option
            v-for="(item, index) in skuTypeOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="编码" prop="code">
        <el-input v-model="skuAddFormData.code" placeholder="请输入编码" clearable :style="{width: '100%'}" />
      </el-form-item>
      <el-form-item label="税务编码" prop="taxCategoryNo">
        <el-input
          v-model="skuAddFormData.taxCategoryNo"
          placeholder="请输入税务编码"
          clearable
          :style="{width: '100%'}"
        />
      </el-form-item>
      <el-form-item label="计量单位" prop="measureUnit">
        <el-input v-model="skuAddFormData.measureUnit" placeholder="请输入计量单位" clearable :style="{width: '100%'}" />
      </el-form-item>
      <el-form-item label="请选择模板" prop="templateId">
        <el-select v-model="skuAddFormData.templateId" placeholder="选择请请选择模板" clearable :style="{width: '100%'}" @change="getAttr">
          <el-option
            v-for="(item, index) in templateIdOptions"
            :key="index"
            :label="item.name"
            :value="item.id"
            :disabled="item.disabled"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <span style="font-weight:bold;color: red;">动态属性:</span>
      </el-form-item>
      <div v-for="(it,index) in attributes" :key="index">
        <el-form-item v-if="it.inputType == 'TEXT'" :label="it.name" :prop="submitModel[it.code]">
          <el-input v-model="submitModel[it.code]" :placeholder="'请输入' + it.name" :style="{width: '100%'}" />
        </el-form-item>
        <el-form-item v-if="it.inputType == 'SINGLE_SELECT'" :label="it.name">
          <el-select v-model="submitModel[it.code]" placeholder="请选择" clearable :style="{width: '100%'}">
            <el-option v-for="(item, index) in it.valueList" :key="index" :label="item.v + '|' +item.l" :value="item.k" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="it.inputType === 'MULTI_SELECT'" :label="it.name">
          <el-select v-model="submitModel[it.code]" placeholder="请选择" multiple clearable :style="{width: '100%'}">
            <el-option v-for="(item, i) in it.valueList" :key="i" :label="item.v + '|' +item.l" :value="item.k" />
          </el-select>
        </el-form-item>
      </div>
      <el-form-item label="配置子SKU">
        <el-button @click="addSKU">添加子SKU</el-button> <el-button @click="removeSKU">移除子SKU</el-button>
        <div v-for="(kv,i) in skuAddFormData.children" :key="i" style="margin-top: 5px;">
          <el-select v-model="kv.key" placeholder="请选择" clearable :style="{width: '100%'}">
            <el-option v-for="(item, index) in skuListOptions" :key="index" :label="item.name" :value="item.id" />
          </el-select>
        </div>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="skuAddFormData.remark" placeholder="请输入备注" clearable :style="{width: '100%'}" />
      </el-form-item>
      <el-form-item size="large">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { create, getSkusByCondition } from '@/api/asset/objectSku'
import { getTemplateByCategoryCode, getTemplateItemsById } from '@/api/template/template'
export default {
  components: {},
  inheritAttrs: false,
  props: [],
  data() {
    return {
      skuAddFormData: {
        skuName: undefined,
        code: undefined,
        skuType: 1,
        taxCategoryNo: undefined,
        measureUnit: undefined,
        templateId: undefined,
        remark: undefined,
        children: [],
        jsonStr: ''
      },
      skuRules: {
        skuName: [{
          required: true,
          message: '请输入单行文本sku名称',
          trigger: 'blur'
        }],
        skuType: [{
          required: true,
          message: '请选择SKU类型',
          trigger: 'change'
        }],
        code: [{
          required: true,
          message: '请输入编码',
          trigger: 'blur'
        }],
        taxCategoryNo: [{
          required: true,
          message: '请输入税务分类编码',
          trigger: 'blur'
        }],
        measureUnit: [{
          required: true,
          message: '请输入计量单位',
          trigger: 'blur'
        }],
        templateId: [{
          required: true,
          message: '选择请请选择模板',
          trigger: 'change'
        }],
        remark: [{
          required: true,
          message: '请输入备注',
          trigger: 'blur'
        }]
      },
      templateIdOptions: [],
      attributes: [],
      submitModel: {},
      skuTypeOptions: [{
        'label': '单件',
        'value': 1
      }, {
        'label': '套件',
        'value': 2
      }],
      skuListOptions: []
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      getTemplateByCategoryCode('spu').then(response => {
        this.templateIdOptions = response.result
      })
      const req = { 'name': '' }
      getSkusByCondition(req).then(response => {
        this.skuListOptions = response.result
      })
    },
    submitForm() {
      this.$refs['skuAddForm'].validate(valid => {
        if (!valid) return
        this.skuAddFormData.jsonStr = JSON.stringify(this.submitModel)
        create(JSON.stringify(this.skuAddFormData)).then(response => {
          this.$message.success({
            type: 'success',
            message: '添加成功'
          })
          this.resetForm()
        })
      })
    },
    getAttr() {
      const templateId = this.skuAddFormData.templateId
      getTemplateItemsById(templateId).then(response => {
        console.log(response)
        this.attributes = response.result
        for (let i = 0; i < this.attributes.length; i++) {
          const item = this.attributes[i]
          this.$set(this.submitModel, item.code, '')
          console.log(this.submitModel)
        }
      })
    },
    resetForm() {
      this.$refs['skuAddForm'].resetFields()
    },
    addSKU() {
      this.skuAddFormData.children.push('')
    },
    removeSKU() {
      this.skuAddFormData.children.pop()
    }
  }
}
</script>

